import { Tabs } from 'antd'
import { useTabStore, useRouteStore } from '@/store'
import { useNavigate, useLocation } from 'react-router'
import './style.less'

export default function MultiTabs() {
  // console.log('MultiTabss')
  const { tabs, activeKey, removeTab } = useTabStore()
  const { removeCache } = useRouteStore()
  const navigate = useNavigate()

  // 切换标签时，路由也变s化
  const onChange = function(key) {
    // console.log('onChange', arguments)
    let tab = tabs.find(t => t.key === key)
    if(tab) {
      navigate(tab.fullPath || key)
    }
  }

  const onRemove = function(targetKey){
    removeTab(targetKey, navigate)
    removeCache(targetKey)
  }
  return (
    <Tabs
      className="M-multi-tabs"
      type="editable-card"
      hideAdd
      activeKey={activeKey}
      onChange={onChange}
      onEdit={(targetKey, action) => {
        if (action === 'remove') {
          onRemove(targetKey)
        }
      }}
      items={tabs.map(tab => ({
        key: tab.key,
        label: tab.label,
        closable: tab.closable,
        children: ''
      }))}
    />
  )
}
